<template>
  <view class="method-page">
    <!-- 商品宫格 -->
    <view class="goods-grid">
      <view
        class="goods-card"
        v-for="(item, idx) in dataList"
        :key="idx"
        @click="toLink(item)"
      >
        <image :src="img(item.goods_cover)" class="goods-img" />
        <view class="goods-title">{{ item.goods_name || "-" }}</view>
        <view class="goods-price-row">
          <text class="goods-price">￥{{ item.goodsSku.price || "-" }}</text>
          <text class="goods-sold">已售{{ item.sale_num || 0 }}件</text>
        </view>
      </view>
    </view>
    <uv-load-more v-if="dataList.length" :status="status" line height="60" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getBartenderPlan } from "@/addon/shop/api/select";
import { redirect, img } from "@/utils/common";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const status = ref("loadmore");
const total = ref(0);
const dataList = ref([]);
const query = ref({
  page: 1,
  limit: 10,
});

onLoad(() => {
  init();
});

const init = () => {
  query.value.page = 1;
  dataList.value = [];
  getList();
};

// 跳转商品详情
const toLink = (item) => {
  redirect({ url: "/addon/shop/pages/goods/detail", param: { goods_id: item.goods_id } });
};

// 获取大师配方列表
const getList = () => {
  status.value = "loading";
  getBartenderPlan(query.value)
    .then((res) => {
      if (res.code == 1) {
        let list = res.data.data;
        dataList.value = query.value.page == 1 ? list : dataList.value.concat(list);
        total.value = res.data?.total;
      }
    })
    .finally(() => {
      status.value = dataList.value.length >= total.value ? "nomore" : "loadmore";
      uni.stopPullDownRefresh();
    });
};

// 下拉刷新
onPullDownRefresh(() => {
  init();
});

// 上拉加载更多
onReachBottom(() => {
  if (dataList.value.length < total.value) {
    query.value.page++;
    getList();
  }
});
</script>

<style scoped>
.method-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding-bottom: 20rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 20rpx 0 20rpx;
  background: #f5f6fa;
}

.nav-back {
  font-size: 32rpx;
  color: #888;
  margin-right: 10rpx;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.nav-icon {
  font-size: 28rpx;
  color: #888;
}

.goods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx 18rpx;
  padding: 24rpx 18rpx 0 18rpx;
}

.goods-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx #f3eaea;
  padding: 0 0 18rpx 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}

.goods-img {
  width: 100%;
  height: 320rpx;
  object-fit: cover;
  border-radius: 18rpx 18rpx 0 0;
}

.goods-title {
  font-size: 32rpx;
  color: #222;
  font-weight: 500;
  margin: 12rpx 0 0 14rpx;
}

.goods-price-row {
  display: flex;
  align-items: center;
  margin: 10rpx 0 0 14rpx;
}

.goods-price {
  color: #ff1919;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 18rpx;
}

.goods-sold {
  color: #999;
  font-size: 22rpx;
}
</style>
